<template>
    <div ref="html">
        <div class="mx-auto container my-5">
            <!-- 搜索 -->
            <div class="w-full flex justify-center mt-10">
                <div class="w-full md:w-8/12 lg:w-6/12">
                    <div class="relative">
                        <input v-model="search" @input="searchChange" type="text"
                            class="w-full h-12 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:border-blue-500"
                            placeholder="搜索你想要的内容" style="font-family: 'Roboto', sans-serif;" />
                        <div class="absolute right-0 top-0 h-full flex items-center">
                            <div
                                class="w-12 h-12 flex justify-center items-center rounded-full bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
                                <span class="iconfont icon-search text-white"></span>
                            </div>
                        </div>
                        <!-- <div v-if="searchList.length > 0" class="absolute w-full bg-white rounded-md mt-2">
                            <ul>
                                <li v-for="(item, index) in searchList" :key="index"
                                    class="border-b border-gray-300 p-2">
                                    <nuxt-link :to="'/post/' + item.postId" v-text="item.title"></nuxt-link>
                                </li>
                            </ul>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap relative">
                <div class="bg-white p-6 rounded-md mt-4 w-full lg:w-8/12" ref="leftNormalContainer">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <p class="font-semibold text-2xl">最新文章</p>
                        </div>
                        <div>
                            <div @click="showCategory()" class="relative bg-gray-100 px-3 cursor-pointer rounded-md">
                                <span class="custom-font-14 leading-8 relative inline select-none">分类
                                    <span class="iconfont icon-arrow-down inline-block"
                                        :class="isShowCategory ? 'reverse' : ''" />
                                </span>
                            </div>
                        </div>
                    </div>

                    <div v-show="isShowCategory" :class="isShowCategory ? '' : 'hidden'"
                        class="flex py-3 space-x-4 flex-none overflow-auto">
                        <div class="btn-2" @click="selectTagId('')"
                            :class="tagId == '' ? 'bg-blue-600 text-white' : ''">全部</div>
                        <div v-for="(item, index) in categoryList" :key="index" @click="selectTagId(item.tagId)"
                            class="btn-2" :class="tagId == item.tagId ? 'bg-blue-600 text-white' : ''">
                            {{ item.name }}
                        </div>
                    </div>
                    <ul>
                        <li v-for="(item, index) in articleList" :key="index" class="mt-4">
                            <div class="border-b pb-2">
                                <div class="flex relative">
                                    <div class="flex-1 mr-2">
                                        <nuxt-link target="_blank" :to="'/post/' + item.postId">
                                            <p class=" font-semibold text-base h-8 leading-8 w-full overflow-y-hidden"
                                                v-text="item.title">
                                            </p>
                                        </nuxt-link>
                                        <nuxt-link target="_blank" :to="'/post/' + item.postId">
                                            <p class=" custom-font-14 leading-8 overflow-hidden h-6"
                                                v-text="item.summary"></p>
                                        </nuxt-link>
                                        <ul class="flex items-center mt-6  text-gray-400">
                                            <li class="flex items-center leading-4">
                                                <span class="custom-font-12" v-text="howtime(item.editTime)"></span>
                                            </li>
                                            <li class="flex items-center leading-4">
                                                <span class="flex items-center iconfont icon-browse" />
                                                <span class="custom-font-12 ml-1" v-text="item.visits"></span>
                                            </li>
                                            <li class="flex items-center leading-4 ml-1">
                                                <span class="flex items-center iconfont icon-good" /><span
                                                    class="custom-font-12 ml-1">{{ item.likes }}</span>
                                            </li>
                                            <li class="flex items-center leading-4 ml-1">
                                                <span class="flex items-center iconfont icon-comments" /><span
                                                    class="custom-font-12 ml-1">{{ 1887 }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- <div v-if="item.image == ''" class="flex-none w-32 h-24"></div> -->
                                    <img v-if="item.image != ''" class="w-32 h-24 right-0 object-contain"
                                        :src="'https://ssm.res.meizu.com/admin/2023/05/12/1780834568/tZjWcG1qvw.png?x-oss-process=image/resize,w_216/format,webp'"
                                        alt="" srcset="" />
                                </div>
                            </div>
                            <ins v-if="index == 5" class="adsbygoogle" style="display:block" data-ad-format="fluid"
                                data-ad-layout-key="-h8-2h-1d-6s+z6" data-ad-client="ca-pub-6667301035180632"
                                data-ad-slot="6020177581"></ins>
                        </li>
                        <li v-show="empty" class="mt-4 text-center">
                            <p>到底了</p>
                        </li>
                        <div v-show="loading" class="w-full animate-pulse">
                            <div class="flex items-center mb-6">
                                <div class="w-8/12">
                                    <div class="w-10/12 h-6 bg-gray-200 my-3">
                                    </div>
                                    <div class="w-10/12 h-6 bg-gray-200 my-3">
                                    </div>
                                </div>
                                <div class="flex-1 bg-gray-200 w-2/12 md:w-1/12 h-16">
                                </div>
                            </div>
                            <div class="flex items-center mb-6">
                                <div class="w-8/12">
                                    <div class="w-10/12 h-6 bg-gray-200 my-3">
                                    </div>
                                    <div class="w-10/12 h-6 bg-gray-200 my-3">
                                    </div>
                                </div>
                                <div class="flex-1 bg-gray-200 w-2/12 md:w-1/12 h-16">
                                </div>
                            </div>
                        </div>
                    </ul>
                </div>

                <!-- 广而告之 -->
                <div class="mt-4 hidden lg:block w-full lg:w-4/12 absolute right-0">
                    <div class="lg:pl-6 w-full" ref="rightNormalContainer">
                        <div class="w-full py-6 rounded text-center bg-gradient-to-r from-cyan-500 to-blue-500">
                            <nuxt-link to="/">
                                <div class="mx-auto">
                                    <p class="text-2xl font-bold text-white">优质广告位</p>
                                </div>
                            </nuxt-link>
                        </div>
                        <div class="w-full my-2 py-6 rounded text-center bg-gradient-to-r from-violet-500 to-fuchsia-500">
                            <nuxt-link to="/tool/detail/FlvPlayer">
                                <div class="mx-auto">
                                    <p class="text-2xl font-bold text-white">FLV播放器</p>
                                </div>
                            </nuxt-link>
                        </div>
                        <div class="w-full my-2 py-6 rounded text-center bg-gradient-to-r from-orange-500 to-fuchsia-700">
                            <nuxt-link to="/tool/detail/ScreenRec">
                                <div class="mx-auto">
                                    <p class="text-2xl font-bold text-white">PC在线录屏</p>
                                </div>
                            </nuxt-link>
                        </div>
                    </div>
                    <div class="pl-6 w-full" ref="rightNormalContainer">
                        <nuxt-link to="/tool/detail/ScreenRec"><img src="/ad/ScreenRecAD.jpg" alt="" srcset="">
                        </nuxt-link>
                    </div>
                    <div v-bind:style="{
                        width: rightFixedContainerWidth,
                    }" class="h-20 pl-6 my-4 hidden lg:block w-full" ref="rightFixedContainer">
                        <div class="bg-white rounded-md p-6">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <p class="font-semibold text-2xl">AD</p>
                                    <p class=" hidden lg:inline leading-8 mx-4 text-sm text-gray-400 ">
                                        广而告之
                                    </p>
                                </div>
                                <div>
                                    <div class="btn-1">更多</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { api } from "~/api/api";
import howtime from "~~/plugins/time";

let isShowCategory = ref(true);
let rightFixedContainerWidth = ref("100%");
let loading = ref(false);
let empty = ref(false);
let page = ref(2);
let size = ref(10);
let tagId = ref("")
let search = ref("");
const articleParams = ref({
    tagId: ''
})
let articleList = ref<any[]>([])
let categoryList = ref<any[]>([])
let rightNormalContainer = ref<HTMLInputElement>();
let rightFixedContainer = ref<HTMLInputElement>()

let categoryResult = await api.article.getTags();
categoryList.value = categoryResult.data;

const { data: articleData, pending, refresh, error } = await useAsyncData("read_GetList", () => api.article.getList(1, 10, articleParams.value));

if (articleData.value!.success) {
    articleList.value = articleList.value.concat(articleData.value!.data.list)
}

onMounted(async () => {
    await refresh()
    articleList.value = articleData.value!.data.list
    window.addEventListener("scroll", handleScroll, false);

    //@ts-ignore
    (adsbygoogle = window.adsbygoogle || []).push({});
})

onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
})

async function selectTagId(id: string) {
    page.value = 2;
    empty.value = false
    articleList.value = []
    loading.value = true
    tagId.value = id
    if (id == "") {
        articleParams.value.tagId = "";
    } else {
        articleParams.value.tagId = tagId.value;
    }
    await refresh();
    articleList.value = articleData.value!.data.list
    loading.value = false
}

function setFloatContainer() {
    if (rightNormalContainer.value!.getBoundingClientRect().bottom <= 0) {
        rightFixedContainer.value!.style.position = "fixed";
        rightFixedContainer.value!.style.top = "0.5rem";
        rightFixedContainerWidth.value = rightNormalContainer.value!.offsetWidth + "px";
    } else if (rightNormalContainer.value!.getBoundingClientRect().bottom > 0) {
        rightFixedContainerWidth.value = "100%";
        rightFixedContainer.value!.style.top = "";
        rightFixedContainer.value!.style.position = "absolute";
    }
}
function handleScroll() {
    let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    if (scrollTop > 20) {
        setFloatContainer();
    }
    let documentHeight = Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight
    );
    if (documentHeight - scrollTop - window.innerHeight < 60 && !empty.value) {
        loadMore();
    }
}


function showCategory() {
    isShowCategory.value = !isShowCategory.value;
}

async function loadMore() {
    if (loading.value) {
        return;
    }
    loading.value = true;
    const result = (await api.article.getList(page.value, 10, ""));
    if (result.success) {
        if (result.data.content.length == 0) {
            empty.value = true;
        }
        articleList.value = articleList.value.concat(result.data.content);
        page.value = page.value + 1;
    }
    loading.value = false;
}


useHead({
    title: "文章",
    titleTemplate: (title) => `${title} - ZNGG在线工具`,
    meta: [
        { name: 'Keywords', content: 'ZNGG在线工具文章,IT文章分享,高质量内容输出,高质量文章分享' },
        { name: 'description', content: 'ZNGG在线工具是一个持续提供高质量内容输出平台，并将输出内容转变为成果，提供各种各样的在线工具。' }
    ],
    script: [
        { async: "true", src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6667301035180632', crossorigin: "anonymous" }
    ]
})
</script>

<style>
.RightFixedContainer-absolute {
    @apply absolute;
}

.RightFixedContainer-fixed {
    @apply fixed top-2;
}

.border-t-1 {
    border-top-width: 1px;
}

.icon-arrow-down {
    @apply duration-100;
}

.reverse {
    transform: rotate(180deg);
}
</style>
